/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/

html {
  font-size: 10px;
}

body {
  font-size: 1.6rem;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
  user-select: none;
}

th,
td {
  border: 0.1rem solid #ddd;
  padding: 0.5rem;
  width: 8rem;
  height: 4rem;
  vertical-align: middle;
  overflow: visible;
  box-sizing: border-box;
}

thead tr {
  background-color: #ddd;
}

.menu {
  position: fixed;
  background: #e4e5e7;
  border: 0.1rem solid #cbcbcb;
  padding: 0.4rem;
  min-width: 15rem;
  display: none;
  z-index: 1000;
  border-radius: 0.4rem;
}

.menu-item {
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  cursor: pointer;
}

.menu-item:hover {
  background: #6ba0f9;
  color: #fff;
}

.selected {
  outline: 1px solid #6ba0f9;
  background: #ebf0fa;
}

table *[contenteditable='true'] {
  outline-color: rgba(255, 0, 0, 0.568);
}

tr {
  position: relative;
}

.row-resizer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  cursor: row-resize;
}

.row-resizer:hover {
  background: rgba(0, 0, 0, 0.1);
}

tr th {
  position: relative;
}

.col-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4px;
  background: transparent;
  cursor: col-resize;
}

.col-resizer:hover {
  background: rgba(0, 0, 0, 0.1);
}

tr.dragging,
th.dragging {
  opacity: 0.5;
}

tr.dragover-above {
  border-top: 2px solid #6ba0f9;
}

tr.dragover {
  border-bottom: 2px solid #6ba0f9;
}

th.dragover-above {
  border-left: 2px solid #6ba0f9;
}

th.dragover {
  border-right: 2px solid #6ba0f9;
}
